import {FormInput, FormSelect} from "@/zpkgs/hooks/form";

export let con_coms = [
  {
    label: 'tab',
    key: 'tab',
    children: [
      {
        id: ZY.rid(),
        style: {
          backgroundImage: require('./images/tab1.png'),
        },
        data() {
          return {
            selected: false,
            container: true,
            widget: 'ZDragContainer',
            widgetConfig: {
              mode: 'tab'
            }
          }
        }
      },
    ]
  },
  {
    label: 'div',
    key: 'div',
    children: [
      {
        id: ZY.rid(),
        style: {
          backgroundImage: require('./images/video1.png'),
        },
        data() {
          return {
            selected: false,
            container: true,
            widget: 'ZDragContainer',
            widgetConfig: {
            }
          }
        }
      }
    ]
  }
]

export let data_coms = [
  {
    label: '播放器',
    key: 'player',
    children: [
      {
        id: ZY.rid(),
        style: {
          backgroundImage: require('./images/video1.png'),
        },
        conStyle: {
          "pointer-events": "none"
        },
        data() {
          return {
            widget: 'ZVideoPlayer',
            widgetConfig: {
              options: {
                // videojs options
                muted: true,
                language: 'en',
                playbackRates: [0.7, 1.0, 1.5, 2.0],
                sources: [
                  {
                    type: "video/mp4",
                    src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
                  }
                ],
                poster: "img.jpg",
              }
            }
          }
        }
      },
    ]
  },
  {
    label: '表格',
    key: 'table',
    children: [
      {
        id: ZY.rid(),
        style: {
          backgroundImage: require('./images/table1.png'),
        },
        conStyle: {
          overflow: 'auto'
        },
        data() {
          return {
            widget: 'z-crud-table',
            widgetConfig: {
              obj: {
                defaultUrl: '/api/list',
                request: globalThis.Req,
              },
              noSearchBar: true,
              selectable: false,
              noAction: true
            },
          }
        }
      }
    ]
  },
  {
    label: '图片',
    key: 'image',
    children: [
      {
        id: ZY.rid(),
        style: {
          backgroundImage: require('./images/video1.png'),
        },
        data() {
          return {
            widget: 'ElImage',
            widgetConfig: {
              src: location.origin + '/img.jpg',
              style: {
                height: '100%',
                width: '100%',
              },
              fit: ''
            },
            formDef: {
              properties: {
                src: {
                  ...FormInput('图片地址', {
                    ui: {
                    }
                  }),
                  rules: [],
                },
                fit: {
                  ...FormSelect('fit', {
                    options:['fill', 'contain', 'cover', 'none', 'scale-down'].map(v => {
                      return {
                        label: v,
                        value: v
                      }
                    })
                  })
                }
              }
            }
          }
        }
      }
    ]
  },
  {
    label: '富文本',
    key: 'editor',
    children: [
      {
        id: ZY.rid(),
        style: {
          backgroundImage: require('./images/editor1.png'),
        },
        data() {
          return {
            widget: 'ZDragRichText',
            widgetConfig: {
            },
          }
        }
      }
    ]
  }
]

